
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>客户列表</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="/static/css/bootstrap.css"/>
</head>
<body>
<div class="container-fluid">





    <div th:replace="admin/header::html"></div>

    <div class="text-right"><a class="btn btn-warning" th:href="@{/go/toAddUser}">添加客户</a></div>

    <th:if test="${!empty msg }">
        <div class="alert alert-success">[[${msg}]]</div>
    </th:if>
    <th:if test="${!empty failMsg }">
        <div class="alert alert-danger">[[${failMsg}]]</div>
    </th:if>

    <br>
    <br>


    <table class="table table-bordered table-hover">

        <tr>
            <th width="5%">ID</th>
            <th width="10%">用户名</th>
            <th width="10%">电话</th>
            <th width="10%">邮箱</th>
            <th width="10%">性别</th>
            <th width="12%">操作</th>
        </tr>

        <tr th:each="u : ${userList}">
            <td><P>[[${u.uid}]]<P></td>
            <td><p>[[${u.username}]]</p></td>
            <td><p>[[${u.phone}]]</p></td>
            <td><p>[[${u.email}]]</p></td>
            <td><p>[[${u.gender==1?"男":"女"}]]</p></td>
            <td>
                <a class="btn btn-primary" th:href="@{'/user/' + ${u.uid}}">修改</a>
                <a class="btn btn-danger" @click="deleteEmployee" th:href="@{'/go/deleteUser/' + ${u.uid}}">删除</a>
            </td>
        </tr>

    </table>

    <div class="row">
        <div class="col-md-6">
            <p>
            </p>
        </div>

        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="#">首页</a></li>
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>


<!--                    <li th:each="page_Num:${pageInfo.navigatepageNums}">-->
<!--&lt;!&ndash;                        <a href="#">[[${page_Num}]]&ndash;&gt;-->
<!--                        </a>-->
<!--                    </li>-->


<!--                    <li th:unless="${page_Num != pageInfo.pageNum}" th:each="page_Num:${pageInfo.navigatepageNums}">-->
<!--                        <a href="#">[[${page_Num}]]-->
<!--                        </a>-->
<!--                    </li>-->

                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li><a href="#">末页</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <form id="deleteForm" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el:"#dataTable",
            methods:{
                deleteEmployee:function (event) {
                    //根据id获取表单元素
                    var deleteForm = document.getElementById("deleteForm");
                    //将触发点击事件的超链接的href属性赋值给表单的action
                    deleteForm.action = event.target.href;
                    //提交表单
                    deleteForm.submit();
                    //取消超链接的默认行为
                    event.preventDefault();
                }
            }
        });
    </script>

    <br>

</div>
</body>
</html>